<template>
  <div>
    <MainFrame menuIndex="OrderList">
      <div slot='content'>
        <div class="top-title">
          订单详情
        </div>
        <div class="top-button">
          <el-button type="primary" @click="back">返回</el-button>
        </div>
        <ttForm v-model="form">
          <div slot="slot">
            <el-form-item label="商品列表">
              <el-table :data="form.items[10].value" style="width: 100%">
                <el-table-column prop="cover" label="封面" width="120" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.cover" style="height: 42px; width: auto;" />
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                </el-table-column>
                <el-table-column prop="size" label="商品型号">
                </el-table-column>
                <el-table-column prop="productNum" label="数量">
                </el-table-column>
              </el-table>
            </el-form-item>
          </div>
        </ttForm>
      </div>
    </MainFrame>
  </div>
</template>
<script>
import MainFrame from '@/components/MainFrame'
import utils from '../ttJs/utils.js'
import ttForm from '@/tt_components/ttForm'
export default {
  components: {
    MainFrame,
    ttForm
  },
  data() {
    var validator = (rule, value, callback) => {
      callback();
    };
    return {
      type: null,
      form: {
        id: null,
        url: '',
        readOnly: true,
        items: [
          { name: 'outTradeNo', value: '', label: '订单号', type: 'input', readonly: 'readonly' }, // 0
          { name: 'totalFee', value: '', label: '订单总价', type: 'input', readonly: 'readonly' }, // 1
          { name: 'status', value: '', label: '订单状态', type: 'input', readonly: 'readonly' }, // 2
          { name: 'productNum', value: '', label: '商品数量', type: 'input', readonly: 'readonly' }, // 3
          { name: 'addTime', value: '', label: '下单时间', type: 'input', readonly: 'readonly' }, // 4
          { name: 'userName', value: '', label: '用户', type: 'input', readonly: 'readonly' }, // 5
          { name: 'address', value: '', label: '地址信息', type: 'input', readonly: 'readonly' }, // 6
          { name: 'isShipped', value: '', label: '发货状态', type: 'radio', list: [{ id: 0, title: '未发货' }, { id: 1, title: '已发货' }], disabled: true }, // 7
          { name: 'isClosed', value: '', label: '是否关闭', type: 'radio', list: [{ id: 0, title: '有效' }, { id: 1, title: '已关闭' }], disabled: true }, // 8
          { name: 'trackingNo', value: '', label: '快递单号', type: 'input', readonly: 'readonly' }, // 9
          { name: 'productList', value: [], type: 'slot' } // 10
        ]
      },
    };
  },
  mounted: function() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      var self = this;
      var id = self.$route.query.id
      self.type = self.$route.query.type
      if (utils.validateData(id)) {
        self.form.id = id;
        var url = '/admin/order/info';
        var params = { id: id }
        var success = function(response) {
          var info = response.info;
          var items = self.form.items
          for (var index in items) {
            for (var key in info) {
              if (items[index].name == key) {
                if (items[index].type == 'img') {
                  if (utils.validateData(info[key])) {
                    items[index].imgUrl = info[key];
                  }
                }
                if (items[index].type == 'images') {
                  if (utils.validateData(info[key])) {
                    var images = info[key].split(';')
                    for (var i in images) {
                      if (utils.validateData(images[i])) {
                        var filename = images[i].substring(images[i].lastIndexOf('/') + 1, images[i].indexOf('?') > 0 ? images[i].indexOf('?') : images[i].length);
                        var image = {
                          name: filename,
                          url: images[i]
                        }
                        items[index].list.push(image)
                      }
                    }
                  }
                }
                items[index].value = info[key]
              }
            }
          }
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    back() {
      window.history.back();
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  margin: 0 0 20px 150px;
  font-size: 18px;
  font-weight: bold;
}

.top-button {
  margin: 0 0 20px 150px;
}

</style>
